<template>
  <div class="ze-oa-form">
    <div v-for="(item, index) in formItemConfigs" :key="item.key">
      <ze-input v-if="item.type === 'input'" v-model="formData[item.key]" :label="item.label" />
      <ze-textarea v-if="item.type === 'textarea'" v-model="formData[item.key]" :label="item.label" />
      <ze-picker
        v-if="item.type === 'picker'" v-model="formData[item.key]"
        :options="item.options" :label="item.label"
      />
      <ze-datetime v-if="item.type === 'datetime'" v-model="formData[item.key]" :label="item.label" />
      <ze-upload v-if="item.type === 'upload'" v-model="formData[item.key]" label="图片" />
      <divider v-if="index !== formItemConfigs.length-1" />
    </div>

    <ze-submit @submit="handleSubmit" />
  </div>
</template>

<script>
import ZeInput from './ze-input.vue'
import ZeTextarea from './ze-textarea.vue'
import ZePicker from './ze-picker.vue'
import ZeDatetime from './ze-datetime.vue'
import ZeSubmit from './ze-submit.vue'
import Divider from './cpns/divider.vue'
import ZeUpload from './ze-upload.vue'
import { getTypeOfField } from './utils'

export default {
  name: 'ZeOaForm',
  components: {
    ZeInput,
    ZeTextarea,
    ZeDatetime,
    ZePicker,
    ZeUpload,
    Divider,
    ZeSubmit,
  },
  props: {
    formConfig: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      formData: {},
      formItemConfigs: [],
    }
  },
  created() {
    this.yieldFormItemConfigs()
  },
  methods: {
    /** 生成表单项配置数组，用于渲染输入组件 */
    yieldFormItemConfigs() {
      this.formItemConfigs = this.formConfig.fields.map((field) => {
        return {
          type: getTypeOfField(field),
          key: field.__vModel__,
          label: field.__config__.label,
          options: field.__slot__?.options,
          placeholder: field.placeholder,
          disabled: field.disabled,
          required: field.__config__.required,
        }
      })
    },

    /** 生成表单校验规则 */
    yieldFormRules() {},

    /** 生成 formData */
    yieldFormData() {},

    /** 点击提交 */
    handleSubmit() {
      // eslint-disable-next-line no-console
      console.log(this.formData)
    },
  },
}
</script>

<style lang="scss" scoped>
.ze-oa-form {
  margin: 15px;
  padding: 0 10px;
  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06);
  border-radius: 2px;
}
</style>
